import React from "react";
import {Table,Tooltip } from 'antd';
import {Modal} from 'fly';
import Config from "../../../../../../util/Config";

export default class A extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            vis:false,
            tableArr:[],      //table信息
            fileArr:[],       //文件信息
            logisticArr:[],   //物流信息
            curItem:{}     //当前进入item信息(ref传过来的)
        };

        this.cancelModal = this.cancelModal.bind(this);
        this.inHuo_Ok = this.inHuo_Ok.bind(this);

    }

    columns = [{
        title: '发货时间',
        dataIndex: 'sendDate',
        key: 'sendDate',
    }, {
        title: '款号',
        dataIndex: 'styleNo',
        key: 'styleNo',
    }, {
        title: '品名',
        dataIndex: 'goodsName',
        key: 'goodsName',
    },{
        title: '数量',
        dataIndex: 'quantity',
        key: 'quantity',
    },{
        title: '剩余数量',
        dataIndex: 'remainingQuantity',
        key: 'remainingQuantity',
    },{
        title: '发货数量',
        dataIndex: 'sendQuantity',
        key: 'sendQuantity',
    }
    ];

    cancelModal(){
        this.setState({vis:false});
    }

    componentWillReceiveProps(a,b){
        const d = a.data;
        let arr = [],fileArr = [], loArr = [];

        // 表格需要的key
        const tableKey = ["sendDate","styleNo","goodsName","quantity","remainingQuantity","sendQuantity"];

        d.sendResponse && d.sendResponse.forEach((item,key)=>{
            const obj = {};

            obj.key = key;

            tableKey.forEach((_item)=>{
                if(_item === "sendDate"){
                    //转换时间戳
                    obj[_item] = new Date(item.sendDetail[_item]).toLocaleString();
                }else{
                    // 如果是 styleNo 字段的话，就处理给 item.styleNo中，否则就是 item.senDetail 下;
                    obj[_item] = _item == "styleNo" ? (item.styleNo == null ? "-" : item.styleNo) : item.sendDetail[_item];
                }
            });
            arr.push(obj);
        });

        d.LogisticsMsgList && d.LogisticsMsgList.forEach((item,index)=>{
            fileArr = JSON.parse(item.accessoryUrl1);
            loArr.push(item.logisticsProgressMsg);
        });

        this.setState({
            tableArr:arr,
            fileArr:fileArr,
            logisticArr:loArr,
        })
    }

    inHuo_Ok(){
        this.setState({vis:false});

        this.props.InSuccess && this.props.InSuccess(this.state.curItem);
    }

    footerText = ()=> {
        const orderStatus = this.props.orderStatus,
            curItem = this.state.curItem;

        const Dom = (
            <div className="fly-modal-footer">
                <button type="button" onClick={this.cancelModal} className="fly-btn fly-btn-blank"><span>取消</span></button>
                <button type="button" onClick={this.inHuo_Ok} className="fly-btn fly-btn-primary"><span>确定</span></button>
            </div>
        );

        // 此判断为在收货记录下 是已收货(操作类型为查看)的没有footer，否则操作footer
        if (orderStatus === "0") {
            if (curItem.receiveStatus === "已收货") {
                return null;
            } else {
                return Dom
            }
        }
    };

    render(){
        const {vis,tableArr,fileArr,logisticArr,curItem} = this.state;

        const {orderStatus} = this.props;

        return (
            <Modal
                style={{width:1000}}
                className="order_inoutDetailModal"
                title={orderStatus == "0" ? "收货详情" :"发货详情"}
                visible={vis}
                onCancel={this.cancelModal}
                footer={this.footerText()}
            >
                <h3 className="order_inoutDetailModal_title"> {
                    orderStatus == "0" ? "收货明细：" : "发货明细"
                }</h3>

                <Table
                    className="order_inoutDetailModal_table order_tableModalOverflow"
                    columns={this.columns}
                    dataSource={tableArr}
                    bordered={true}
                    pagination={false}
                />

                <div className="order_inoutDetailModal_info">
                    <h3 className="order_inoutDetailModal_title">
                        物流信息：
                    </h3>
                    {
                        logisticArr.map((i,k)=>
                            <p className="order_inoutDetailModal_desItem">
                                {i}
                            </p>
                        )
                    }
                </div>

                <div className="order_inoutDetailModal_attach">
                    <h3 className="order_inoutDetailModal_title">
                        附件：
                    </h3>

                    <ul className="order_inoutDetailModal_fileContainer">
                        {
                            fileArr && fileArr.map((item,index)=>{
                                    return  (<li className="order_inoutDetailModal_file" key={index}>
                                        <i data-type="fileicon"> </i>
                                        <span data-type="filename">{item.name}</span>
                                        <a data-type="filehref" download  href={`${Config.qiuniu+item.response.key}?attname=${item.name}`}> 下载 </a>
                                    </li>)
                                }
                            )
                        }
                    </ul>
                </div>
            </Modal>
        )
    }
}
